<template>
  <div class="cml-tips-box">
    <div v-if="sholudShowSource"
      class="cml-tips-ani">
      <video v-if="sourceType === 'video'"
        width="100%"
        height="100%"
        autoplay='true'
        loop='true'
        muted='true'
        :src="tip.source"
        @error="sourceErr"></video>
      <img v-if="sourceType === 'img'"
        style="max-width:100%;max-height:100%;"
        :src="tip.source">
    </div>
    <div class="cml-tips-desc">
      <div class="cml-tips-title">{{tip.title}}</div>
      <p class="cml-tips-text">{{tip.content}}</p>
      <div class="cml-tips-more"
        v-if="tip.href"><a :href="tip.href"
          target="_blank">了解更多</a></div>
    </div>
  </div>
</template>
<script>
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'Content',
  components: {},
  model: {},
  props: {
    tip: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showSource: true
    }
  },
  computed: {
    sholudShowSource({ showSource, tip: { source } }) {
      if (source && showSource) {
        return true
      } else {
        return false
      }
    },
    sourceType({ tip: { source } }) {
      if (this.isVideo(source)) {
        return 'video'
      }
      if (this.isImage(source)) {
        return 'img'
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    isVideo(url) {
      const videoSrcReg = /[\.mp4|\.webm|\.ogg]$/i
      return videoSrcReg.test(url)
    },
    isImage(url) {
      const imageSrcReg = /[\.png|\.jpg|\.jpeg|\.webp]/i
      return imageSrcReg.test(url)
    },
    sourceErr() {
      this.showSource = false
    },
    playVideo(e) {
      e.target.play()
    },
    stopVideo(e) {
      e.target.pause()
    }
  }
}
</script>
<style lang="scss" scoped>
.cml-tips-box {
  width: 232px;
  // min-height: 220px;
}
.cml-tips-ani {
  background: #141519;
  height: 130px;
}
.cml-tips-desc {
  padding: 12px 15px;
}
.cml-tips-title {
  font-size: 14px;
  color: #c1fffb;
  padding-bottom: 4px;
}
.cml-tips-text {
  font-size: 12px;
  color: #c1fffb;
  opacity: 0.5;
}
.cml-tips-more {
  text-align: right;
  a {
    font-size: 12px;
    color: #24e0f1;
  }
}
</style>